<script setup>
import { NCarousel } from 'naive-ui'
</script>

<template>
  <NCarousel dot-type="line" dot-placement="bottom" direction="horizontal" :show-dots="true" trigger="click" style="width: 100%; height: 800px">
    <div class="banner1">
      <div class="flex flex-col justify-center items-center mt-40px">
        <div class="flex flex-col items-center">
          <div>
            <img class="w-141px h-39px" src="/public/images/banner/solution/logo.png" alt="寓盟管家" />
          </div>
          <div class="600 text-44px leading-54px mt-20px mb-20px">住房租赁数字化管理平台</div>
          <div class="400 text-18px leading-30px" style="color: #333">一款智能化公寓与宿舍管理系统，涵盖房客财等 10 多个基础模块，全方位提升运营效率！</div>
          <div class="flex mt-20px z-99">
            <NuxtLink class="full-btn w-152px h-50px leading-50px rounded-8px text-size-18px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
            <NuxtLink class="white-btn w-152px h-50px leading-50px text-size-18px border-hex-0A87F8 border-solid border-1px rounded-8px ml-16px">预约演示</NuxtLink>
          </div>
        </div>
        <div class="relative w-673px h-388px mt-40px">
          <img class="platform" src="/public/images/banner/solution/computer.png" alt="工作台" />
          <img class="heyue" src="/public/images/banner/solution/heyueguanli.png" alt="合约管理" />
          <img class="hezhengzu" src="/public/images/banner/solution/hezhengzu.png" alt="合整租" />
          <img class="fangyuan" src="/public/images/banner/solution/fangyuanguanli.png" alt="房源管理" />
          <img class="chufang" src="/public/images/banner/solution/chufangpaiming.png" alt="出房排名" />
          <img class="caiwu" src="/public/images/banner/solution/caiwuguanli.png" alt="财务管理" />
          <img class="left-icon" src="/public/images/banner/solution/left-icon.png" alt="icon" />
          <img class="right-icon" src="/public/images/banner/solution/right-icon.png" alt="icon" />
        </div>
      </div>
    </div>
    <!-- <img
      class="h-full w-full"
      src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
    > -->
    <template #dots="{ total, currentIndex, to }">
      <ul class="flex justify-center absolute bottom-20px left-0 w-full">
        <li v-for="index of total" :key="index" class="w-80px h-4px mx-15px cursor-pointer" :class="[currentIndex == index - 1 ? 'bg-hex-0A87F8' : 'bg-hex-D1D1D1']" @click="to(index - 1)" />
      </ul>
    </template>
  </NCarousel>
</template>

<style scoped>
.banner1 {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden;
  /* width: 100%; */
  height: 100%;
  background: url('/public/images/banner/solution/banner2.png') no-repeat 0 0;
  background-size: 100% 100%;
}

@keyframes platform-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes item-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.platform {
  opacity: 0;
  @apply w-full h-full;
  /* animation: platform-animation duration timing-function delay iteration-count direction fill-mode; */
  animation: platform-animation 0.5s ease-in 0s 1 normal forwards;
}

.heyue {
  opacity: 0;
  @apply w-389px h-315px absolute left-90px top-20px z-4;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.fangyuan {
  opacity: 0;
  @apply w-377px h-285px absolute -left-140px -top-86px z-3;
  animation: item-animation 0.5s ease-in 1.5s 1 normal forwards;
}

.hezhengzu {
  opacity: 0;
  @apply w-633px h-421px absolute -left-300px top-72px z-3;
  animation: item-animation 0.5s ease-out 2.5s 1 normal forwards;
}

.caiwu {
  opacity: 0;
  @apply w-377px h-286px absolute -right-180px -bottom-84px z-3;
  animation: item-animation 0.5s ease-out 3s 1 normal forwards;
}

.chufang {
  opacity: 0;
  @apply w-438px h-364px absolute -right-230px -top-74px z-1;
  animation: item-animation 0.5s ease-out 3.5s 1 normal forwards;
}
.left-icon {
  opacity: 0;
  @apply w-236px h-237px absolute -left-300px top-72px z-3;
  animation: item-animation 0.5s ease-out 2s 1 normal forwards;
}
.right-icon {
  opacity: 0;
  @apply w-236px h-237px absolute -right-260px -top-90px z-1;
  animation: item-animation 0.5s ease-out 4s 1 normal forwards;
}
</style>
